import React from 'react';
import { FlatList, Text, View } from 'react-native';
import { SwipeAction } from 'antd-mobile';
import { Actions } from 'react-native-router-flux';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { phonecall } from 'react-native-communications';
import { fromNow } from '../../../utils';
import Button from '../../../components/Button';
import styles from './style';

const typeStyle = typeCode => {
  switch (typeCode) {
    case 1:
      return {
        icon: <MaterialIcons name="cake" size={24} color="#f55" />,
        bgc: '#fcf5f5'
      };
    case 3:
      return {
        icon: <MaterialIcons name="visibility" size={16} color="#0099ff" />,
        bgc: '#f5f8fb'
      };
    case 2:
      return {
        icon: <MaterialIcons name="payment" size={16} />,
        bgc: '#fcf5ea'
      };
    default:
      return {};
  }
};

const keyExtractor = item => item.taskId.toString();

const Empty = () => {
  return (
    <View style={{ padding: 10, alignItems: 'center' }}>
      <Text style={{fontSize: 22, color: '#999', marginVertical: 20}}>您没有任务，添加一个吧</Text>
      <Button title="添加任务" type="primary" onPress={() => Actions.checkCustomer()} />
    </View>
  );
};

export default ({ data = [], store }) => {
  const renderItem = ({ item }) => {
    const { title, description, scheduledTime, type,customerMobile } = item;
    const right = [
      {
        text: '处理',
        onPress: store.setTaskDone.bind(store, item.taskId),
        style: { backgroundColor: '#3399ff', color: '#fff' }
      },
      {
        text: '电话',
        onPress: () => phonecall(customerMobile, false),
        style: { backgroundColor: '#33cc33', color: '#fff' }
      }
    ];
    const ts = typeStyle(type);
    return (
      <SwipeAction right={right} style={styles.listItemSwipe} autoClose>
        <View style={[styles.listItem, { backgroundColor: ts.bgc }]}>
          <View style={styles.listItemIcon}>{ts.icon}</View>
          <View style={styles.listItemMain}>
            <Text style={styles.listItemMainName}>{title}</Text>
            {description ? (
              <Text style={styles.listItemMainRemark}>{description}</Text>
            ) : null}
          </View>
          <View>
            <Text style={styles.listItemLimitTime}>
              {fromNow(scheduledTime, 1)} 
            </Text>
          </View>
        </View>
      </SwipeAction>
    );
  };
  return (
    <View style={styles.listWrap}>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        ListEmptyComponent={<Empty />}
      />
    </View>
  );
};
